<template>
    <div class="white-box">
        <el-form
            ref="rulePassRef"
            :model="rulePassForm"
            :rules="ruleCheckPass"
            label-width="120px"
        >
            <el-form-item label="原密码" prop="old_pass">
                <el-input
                    v-model.trim="rulePassForm.old_pass"
                    type="password"
                    autocomplete="new-password"
                    clearable
                    placeholder="请输入原密码"
                />
            </el-form-item>
            <el-form-item label="新密码" prop="new_pass">
                <el-input
                    v-model.trim="rulePassForm.new_pass"
                    type="password"
                    autocomplete="new-password"
                    clearable
                    placeholder="请输入新密码"
                />
            </el-form-item>
            <el-form-item label="确认密码" prop="confirm_pass">
                <el-input
                    v-model.trim="rulePassForm.confirm_pass"
                    type="password"
                    autocomplete="new-password"
                    clearable
                    placeholder="请再次输入新密码"
                />
            </el-form-item>
            <el-form-item>
                <div class="flexs" style="margin-top: 30px">
                    <el-button
                        type="primary"
                        :loading="form_loading"
                        @click="submitPassForm(rulePassRef)"
                        >确认修改</el-button
                    >
                    <el-button @click="resetPassForm(rulePassRef)"
                        >重置</el-button
                    >
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { inject, ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import { changeCurAccountPwd } from "@/apis/user/user";

const $message = inject("$message");
const router = useRouter();

onMounted(() => {});

/**
 * 修改密码
 * @param {Boolean} form_loading 提交按钮状态
 * @param {Array} rulePassRef 表单规则
 * @param {Object} rulePassForm  表单字段
 * @param {Object} ruleCheckPass  表单提示
 * @param {Function} submitPassForm 提交表单
 */
const form_loading = ref(false);
const rulePassRef = ref(null);
const validatePass = (rule, value, callback) => {
    if (value === "") {
        callback(new Error("请再次输入新密码"));
    } else if (value !== rulePassForm.new_pass) {
        callback(new Error("两次输入的秘密不一致"));
    } else {
        callback();
    }
};
const rulePassForm = reactive({
    old_pass: "",
    new_pass: "",
    confirm_pass: "",
});
const ruleCheckPass = reactive({
    old_pass: [{ required: true, message: "请输入原密码", trigger: "blur" }],
    new_pass: [{ required: true, message: "请输入新密码", trigger: "blur" }],
    confirm_pass: [
        { required: true, validator: validatePass, trigger: "blur" },
    ],
});

const submitPassForm = (formEl) => {
    if (!formEl) return;
    formEl.validate(async (valid, fields) => {
        if (valid) {
            form_loading.value = true;

            const res = await changeCurAccountPwd({
                oldPassword: rulePassForm.old_pass,
                newPassword: rulePassForm.new_pass,
            });
            form_loading.value = false;
            if (res.data.code == 200) {
                $message({ message: "修改成功", type: "success" });
                router.push("/");
            } else {
                $message({ message: res.data.msg, type: "error" });
            }
        }
    });
};
const resetPassForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
};
</script>

<style lang="less" scoped>
.el-form {
    width: 400px;
}
</style>
